<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日活跃用户数据看板</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .dashboard-header {
            text-align: center;
            margin: 20px 0;
        }

        .current-dau-container {
            display: inline-block;
            position: relative;
            width: 150px;
            height: 150px;
            margin-bottom: 20px;
        }

        .dau-circle {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: linear-gradient(135deg, #4CAF50, #8BC34A);
            box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .dau-label {
            font-size: 14px;
            margin-bottom: 5px;
            font-weight: 500;
            z-index: 2;
        }

        .dau-value {
            font-size: 32px;
            font-weight: bold;
            z-index: 2;
        }

        /* 半波动效果 */
        .wave-container {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            overflow: hidden;
            z-index: 1;
        }

        .wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 200%;
            height: 150%;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 45%;
            animation: wave 3s linear infinite;
        }

        .wave:nth-child(2) {
            animation-direction: reverse;
            animation-duration: 4s;
            border-radius: 40%;
            background: rgba(255, 255, 255, 0.2);
            height: 160%;
        }

        @keyframes wave {
            0% {
                transform: translateX(-30%) translateY(0);
            }
            50% {
                transform: translateX(0%) translateY(-20%);
            }
            100% {
                transform: translateX(-30%) translateY(0);
            }
        }
    </style>
</head>
<body>
<div class="dashboard-header">
    <div class="current-dau-container">
        <div class="dau-circle">
            <div class="wave-container">
                <div class="wave"></div>
                <div class="wave"></div>
            </div>
            <div class="dau-label">今日活跃用户</div>
            <div class="dau-value" id="currentDAU">-</div>
        </div>
    </div>
</div>

<div style="width: 80%; margin: 0 auto;">
    <canvas id="dailyActiveUsersChart"></canvas>
</div>

<script>
    // 假设从后端接口获取的数据
    const responseData = {
        "statusCode": 200,
        "message": "Success",
        "data": [
            { "date": "2025-09-07", "dailyActiveUsers": 2 },
            { "date": "2025-09-06", "dailyActiveUsers": 2 },
            { "date": "2025-09-05", "dailyActiveUsers": 3 },
            { "date": "2025-09-04", "dailyActiveUsers": 3 },
            { "date": "2025-09-03", "dailyActiveUsers": 3 },
            { "date": "2025-09-02", "dailyActiveUsers": 3 },
            { "date": "2025-09-01", "dailyActiveUsers": 4 }
        ]
    };

    // 显示今日活跃用户数（保持不变，仍显示最新的数据）
    const currentDAUElement = document.getElementById('currentDAU');
    if (responseData.data.length > 0) {
        currentDAUElement.textContent = responseData.data[0].dailyActiveUsers;
    }

    // 按时间顺序排序数据（从旧到新）
    const sortedData = [...responseData.data].reverse();

    // 从排序后的数据中提取日期和日活跃用户数
    const labels = sortedData.map(item => item.date);
    const data = sortedData.map(item => item.dailyActiveUsers);

    // 获取 canvas 元素
    const ctx = document.getElementById('dailyActiveUsersChart').getContext('2d');

    // 创建 Chart.js 图表
    new Chart(ctx, {
        type: 'line',  // 使用折线图
        data: {
            labels: labels,  // 日期作为横坐标（按时间顺序）
            datasets: [{
                label: '日活跃用户数',  // 数据集标签
                data: data,  // 日活跃用户数作为纵坐标
                borderColor: 'rgba(75, 192, 192, 1)',  // 线条颜色
                fill: false,  // 不填充图表区域
                tension: 0.1  // 设置线条的弯曲程度
            }]
        },
        options: {
            responsive: true,  // 自适应屏幕大小
            scales: {
                x: {
                    title: {
                        display: true,
                        text: '日期'  // 横坐标显示为日期
                    }
                },
                y: {
                    title: {
                        display: true,
                        text: '日活跃用户数'  // 纵坐标显示为日活跃用户数
                    },
                    beginAtZero: true  // 纵坐标从零开始
                }
            }
        }
    });
</script>
</body>
</html>